<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>BI Component - Multiple Selection</title>
<link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css"/>
<link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style.css"/>
<script type="text/JavaScript" src="../../api/js/jquery-1.7.2.min.js"></script>
<script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
<script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

<script type='text/JavaScript'>
var BOI = parent.BOI; //REQUIRED
var properties = { //REQUIRED
    number:50,
    variable: undefined,
    varname: undefined, //this overrides variable if set
    value: undefined,
    notify: false
};
window.onload = function() {
}
var selectedItems = new Array();
var initialize = function initialize() {//REQUIRED //initialization function ... see below..
    /*---- begin your component custom initialization code ----*/
    //example to set property values to dom elements
    refreshProperties();
};
var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
};
var vname;
var cycle = 1;
var total,number;
var updating = false;
var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
    vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
    if(vname)
    {
        load(cycle);
    }
};
var searchText = '';  // SearchText value entered
function load(cycle)
{
    showProgressImage();
    BOI.loadF4Values(vname, cycle, properties.number, function (data) {
        updating = false;
        // clear and the render data
        clear_data();
        for (var x in data.values) {
            $('.multiple .variable-inner ul').append('<li><p title="'+ data.values[x].name +'">' + data.values[x].value + '</p></li>');
        }
        // update pagination
        var values  = data.values;
        total = data.total;
        number = properties.number;
        pagination();
        $('.multiple').attr('id',data.varname);
        $('.multiple h3').html(properties.variable.description);
        $('#'+data.varname).data('page', cycle);
        $('#'+data.varname).data('totalPages', Math.ceil(data.total / number));
        $('.pagination p .current').html(cycle);
        $('.pagination p .total').html(Math.ceil(data.total / number));
    }, parent.properties.rep_id, searchText);
    multiple();
    hideProgressImage(); //setTimeout(hideProgressImage, 3000);
}
function showProgressImage(){
    //$('.variable-inner, .pagination').fadeTo("fast", 0.5);
    $('#idProgressDiv').show();
}
function hideProgressImage(){
    //$('.variable-inner, .pagination').fadeTo("fast", 1);
    $('#idProgressDiv').hide();
}
function clear_data() {
    $('.variable .variable-inner ul').html("");
}
// on RESET button in variable screen
function resetSelections(){
    $('#idVariableInnerSelected ul li p').each(function (){
        $(this).closest('li').remove();
    });
    $('.multiple .variable-inner ul li.ui-selected p').each(function (){
        $(this).closest('li').removeClass('ui-selected');
    });
    // hide the selected view
    hideSelectedView();
    emptySelectedView();
    selectedItems = new Array();
    properties.value ="";
    properties.variable.value="";
    BOI.context.variables[this.vname].value="";
}
function multiple()
{
    $('.multiple .variable-inner ul').selectable({
        start: function (event, ui) {
        },
        stop: function (event, ui) {
            $('.ui-selected p').each(function ()
            {
                if ($.inArray($(this).attr('title'), selectedItems ) == -1) {
                    // add into array - selectedItems
                    var itemTitle = $(this)[0].title;
                    selectedItems.push(itemTitle);

                    //var itemImg = $('<img/>').attr('src','../../img/icon/close_3.png').addClass('sel-list-item-image').bind('click', deleteSelected);
                    var itemImg = $('<span/>').addClass('del-item').bind('click', deleteSelected);
                    var itemP = $('<p/>').attr('title',itemTitle).addClass('sel-list-item').text($(this).text());
                    $(itemP).append(itemImg);
                    $('#idVariableInnerSelected ul').append($('<li/>').append(itemP));
                }
            });
            properties.value = selectedItems;

            // Show the text for selected items list.
            updateSelectedViewLink();
        }
    });
}
function updateSelectedViewLink(){
    // update the selected items count
    $('#idSelectedList span').text(selectedItems.length + " selected");
    $('#idHeaderSelLabel').attr('title','Click here to view the selected items');
    $('#idHeaderSelLabel').bind('click', showSelectedView);

    // show the label text for selected items view
    // if selectedView is already open then do not show this link
    if($('#idVariableInnerSelected').is(':hidden')){
        $('#idSelectedList').show();
        $('#idSelectedList').removeClass('disabled-text');
    }
}
// Delete the selected row on click of Close icon.
function deleteSelected(){
    var removeItem = $(this).closest('li').find('p').attr('title');
    if ($.inArray(removeItem, selectedItems) != -1) {
        //remove item from array - selectedItems
        selectedItems.splice($.inArray(removeItem, selectedItems), 1);

        //delete row [li item] from UI
        $(this).closest('li').remove();

        //show updated number of selected items
        $('#idSelectedList span').text(selectedItems.length + " selected");
        $('#idHeaderSelLabel').attr('title','Click here to view the selected items');
        $('#idHeaderSelLabel').bind('click', showSelectedView);

        // if selectedItems is empty then remove popup and link
        if(null==selectedItems || selectedItems.length==0){
            // hide the selected view
            hideSelectedView();
            emptySelectedView();
        }
    }
}
function pagination()
{
    if(properties.nunmber > total)
    {
        $(".pagination").css('display','none');
    }
    else
    {
        $(".pagination").css('display','block');
    }
}
$(document).ready(function () {
    // Setting height for Variable Inner
    var iframe = $('#ZHR_ESPR_PAYROLLGRP').contents();
    var varHd = $('.variable-head').height();
    var varCvr = window.parent.$('.varscreen .three-col').height();
    $('.variable-inner').height((varCvr - varHd)- 18);

    //2/5/2014 Added for variable dependancy...
    BOI.Events.addListener(BOI.Events.varrefresh, function(args){
        load(1);
    });

    $(".pagination a").live('click', function () {
        var varName = $(this).closest('.variable');
        var temp = 0;
        if (updating == false) {
            if ($(this).hasClass("right") && varName.data('page') < varName.data('totalPages')) {
                temp = varName.data('page') + 1;
                varName.data('page', temp);
            }
            else if ($(this).hasClass("left") && varName.data('page') > 1) {
                temp = varName.data('page') - 1;
                varName.data('page', temp);
            }
            if (temp != 0) {
                $('.pagination p .current').html(varName.data('page'));
                load(varName.data('page'));
            }
        }
    });
    // Register event for Search textinput
    $('#idSearchText').bind('blur focusout', function(){
        if($('#idSearchText').val() == ''){
            $('#idSearchText').val('Search..');
            $('#idSearchText').addClass('disabled-text');
        }
    });
    $('#idSearchText').bind('input propertychange keyup click', inputChange);
    // hide the selected view on close button click
    $("#idVariableInnerSelected span.selected-close").on('click', hideSelectedView);
    // keep focus on search box by default
    $('#idSearchText').focus();
});
function showSelectedView(){
    $('#idVariableInnerSelected').show();
    $('#idSelectedList').hide();
}
function hideSelectedView(){
    $('#idVariableInnerSelected').hide();
    $('#idSelectedList').show();
}
function emptySelectedView(){
    //Replace the selected label text with 'Click to select'
    $('#idSelectedList').addClass('disabled-text');
    $('#idSelectedList span').text("Click to select");
    $('#idHeaderSelLabel').attr('title','Click on the rows to select');
    $('#idHeaderSelLabel').unbind('click');
}
// Method for Search textinput change event
var inputChange = function inputChange(){
    if(!$('#idSearchText').is(':focus'))
        return true;
    if($('#idSearchText').val() == 'Search..'){
        $('#idSearchText').val('');
        $('#idSearchText').removeClass('disabled-text');
        return true;
    }
    // Set the searchText variable with text entered
    // Refresh the data from Server only if searchText is different.
    if(searchText != $('#idSearchText').val()){
        searchText = $('#idSearchText').val();
        // reload the data with new Search text
        load(1);
    }
}
</script>

<style>
    body { overflow:hidden; line-height:0; background:none;}
</style>
</head>
<body>
<div class="variable-cover">
    <div id="idProgressDiv" class="progress-image hidden-class">
        <img src="../../img/ajax-loader.gif"/>
    </div>
    <div class="variable multiple" id="">
        <div class="variable-head">
            <h3><!--Roles Owned By--></h3>
            <div class="variable-search">
                <input id="idSearchText" class="search-box disabled-text" value="Search.." type="text" name="searchKey"/>
                <div id="idSearchImage" class="searchBtn"></div>
                <span id="idHeaderSelLabel" class="header-label" title="Click on the rows to select">
                    <label id="idSelectedList" class="disabled-text">
                        <span>Click to select</span>
                    </label>
                </span>
                <div id="idVariableInnerSelected" class="variable-selected hidden-class">
                    <span class="selected-close"></span>
                    <ul id="idSelList">
                        <!--<li><p>Dummy Value</p></li>-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="variable-inner">
            <ul>
                <!--<li><p>Dummy Value</p></li>-->
            </ul>
        </div>

        <div class="pagination">
            <ul>
                <li><a class="left"><</a></li>
                <li><p><span class="current">1</span>&nbsp;/&nbsp;<span class="total">10</span></p></li>
                <li><a class="right">></a></li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>
<%
theme = ''.
%>